<template>
  <div class="third-service-wrapper page-miH page-bgBack">
    <div class="titleBox">拓展应用</div>
    <div class="third-item-wrapper">
      <div v-for="(item, index) in dataList" :key="index" class="third-item" @click="goDetail(item)">
        <div class="third-item-top">
          <div v-if="item.openStatus" class="third-right-icon">
            <img :src="rightIcon" style="width: 66px; height: 66px" />
          </div>
          <div v-else class="third-right-icon">
            <img :src="rightIcon2" style="width: 66px; height: 66px" />
          </div>
          <div class="itemBox">
            <div class="third-center">
              <img :src="item.serviceIcon" style="width: 56px; height: 56px" />
            </div>
            <div style="margin-left: 24px">
              <div class="third-center third-item-name">{{ item.serviceName }}</div>
              <div class="third-center third-item-text">{{ item.serviceDesc }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="third-item-bottom third-center">详情</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getConfig, getServiceOpens } from "./api.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      dataList: [],
      openUrl: "",
      rightIcon: require("@/assets/img/third/rightIcon.png"),
      rightIcon2: require("@/assets/img/third/rightIcon2.png")
    };
  },
  computed: {
    ...mapGetters(["permissions_dycl"])
  },
  created() {
    // 招聘权限
    this.getServiceOpens();
  },
  methods: {
    getServiceOpens() {
      getServiceOpens().then((res) => {
        this.dataList = res.data;
      });
    },
    goDetail(e) {
      console.log(e);
      if (e.openStatus) {
        this.openUrl = "";
        if (e.serviceCode === "transferAccount") {
          if (this.$hasPermission("transferAccount:faxinshenqing:query")) {
            this.openUrl = "/paySalary/applyFor";
          } else if (this.$hasPermission("transferAccount:faxinshenhe:query")) {
            this.openUrl = "/paySalary/examine";
          } else if (this.$hasPermission("transferAccount:xinzifafang:query")) {
            this.openUrl = "/paySalary/examine";
          } else if (this.$hasPermission("transferAccount:faxinrenyuanku:query")) {
            this.openUrl = "/paySalary/people";
          } else {
            this.$warning({
              title: "暂无权限"
            });
          }
        }
        if (e.serviceCode === "recruitment") {
          if (this.$hasPermission("recruitment:roverview:query")) {
            this.openUrl = "/recruitment/overview";
          } else if (this.$hasPermission("recruitment:management:query")) {
            this.openUrl = "/recruitment/management";
          } else if (this.$hasPermission("recruitment:people:query")) {
            this.openUrl = "/recruitment/people";
          } else if (this.$hasPermission("recruitment:economic:query")) {
            this.openUrl = "/recruitment/economic";
          } else if (this.$hasPermission("recruitment:rpush:query")) {
            this.openUrl = "/recruitment/push";
          } else if (this.$hasPermission("recruitment:laborUnit:query")) {
            this.openUrl = "/recruitment/laborUnit";
          } else if (this.$hasPermission("recruitment:talent:query")) {
            this.openUrl = "/recruitment/talent";
          } else if (this.$hasPermission("recruitment:zhinengtuijian:query")) {
            this.openUrl = "/recruitment/talentZhineng";
          } else {
            this.$warning({
              title: "暂无权限"
            });
          }
        }
        if (e.serviceCode === "clientele") {
          if (this.$hasPermission("clientele:myClientele:query")) {
            this.openUrl = "/clientele/myClientele";
          } else if (this.$hasPermission("clientele:sea:query")) {
            this.openUrl = "/clientele/sea";
          } else if (this.$hasPermission("clientele:member:query")) {
            this.openUrl = "/clientele/member";
          } else {
            this.$warning({
              title: "暂无权限"
            });
          }
        }
        if (e.serviceCode === "contract") {
          this.openUrl = e.serviceUrl;
        }
        if (e.serviceCode === "insuranceAddService") {
          // 商保
          if (this.$hasPermissionSecond("insuranceAddService:insuranceAddService.zaibaorenyuan")) {
            this.openUrl = "/shangbao/list";
          } else if (this.$hasPermissionSecond("insuranceAddService:insuranceAddService.shangbaofangan")) {
            this.openUrl = "/shangbao/plan";
          } else if (this.$hasPermissionSecond("insuranceAddService:insuranceAddService.insuranceManager")) {
            this.openUrl = "/shangyebaoxian";
          } else {
            this.$warning({
              title: "暂无权限"
            });
          }
        }
        if (e.serviceCode === "zhinengsuanshui") {
          if (this.$hasPermissionSecond("zhinengsuanshui:koujiaoyiwurenguanli")) {
            this.openUrl = "/taxCalculate/management";
          } else if (this.$hasPermissionSecond("zhinengsuanshui:baoshuirenyuanku")) {
            this.openUrl = "/taxCalculate/people";
          } else if (this.$hasPermissionSecond("zhinengsuanshui:renyuanbaosong.daibaosong")) {
            this.openUrl = "/taxCalculate/waiting";
          } else if (this.$hasPermissionSecond("zhinengsuanshui:renyuanbaosong.yibaosong")) {
            this.openUrl = "/taxCalculate/report";
          } else if (this.$hasPermissionSecond("zhinengsuanshui:renyuanbaosong.tingzhibaosong")) {
            this.openUrl = "/taxCalculate/stop";
          } else if (this.$hasPermissionSecond("hinengsuanshui:geshuijisuan")) {
            this.openUrl = "/taxCalculate/calculate";
          } else {
            this.$warning({
              title: "暂无权限"
            });
          }
          // this.openUrl = e.serviceUrl;
        }
        if (e.serviceCode === "dycl") {
          if (this.permissions_dycl.length > 0) {
            this.openUrl = e.serviceUrl;
          } else {
            this.$warning({
              title: "暂无权限"
            });
          }
        }
        if (this.openUrl) {
          if (this.openUrl === "/shangyebaoxian") {
            sessionStorage.setItem("shangbaoPageState", "customer");
          }
          const { href } = this.$router.resolve({
            path: `${this.openUrl}` // openUrl
          });
          window.open(href, "_blank");
        }
      } else {
        this.$warning({
          title: "暂未开启"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.titleBox {
  border-left: 2px solid var(--primary);
  padding-left: 8px;
  height: 16px;
  color: #23293e;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.itemBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 24px;
}
.third-service-wrapper {
  padding: 24px;
  .third-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    .third-item {
      width: 31%;
      position: relative;
      margin-right: 24px;
      margin-top: 24px;
      display: flex;
      align-items: center;
      cursor: pointer;
      height: 110px;
      background: #ffffff;
      box-shadow: 0px 0px 15px 0px rgba(195, 195, 195, 0.5);
      border-radius: 6px;
    }
    .third-right-icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .third-item-bottom {
      margin-top: 40px;
      padding-top: 7px;
      border-top: 1px solid #e5e6e9;
    }
    .third-center {
      text-align: center;
    }
    .third-item-name {
      font-size: 16px;
      color: #000000;
    }
    .third-item-text {
      padding-top: 15px;
      color: #666666;
    }
  }
}
</style>
